<template>
  <div id="quotationInfo">
    <div class="nav">
      <span
        @click="$router.go(-1)"
        style="font-size: 0.36rem;font-weight: bold;color: #cfd3e9;margin-right:.2rem;"
      >
        <van-icon name="arrow-left" />
      </span>
      <span class="active">历史委托</span>
    </div>
    <div class="rootMain">
      <Scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="scroll-box" style="position:relative;">
          <div class="qbb-list">
            <ul v-if="tradeList.length>0">
              <van-list
                v-model="loading"
                :loading-text="$t('m.loading')"
                :offset="100"
                :finished-text="$t('m.noMore')"
                :finished="finished"
                @load="onLoad"
              >
                <li v-for="(e,i) in tradeList" :key="i" @click="goDetail(e)">
                  <div class="qbbl-header">
                    <h4>
                      <b class="bg-up" v-if="e.tradeType ==1">买</b>
                      <b class="bg-down" v-else>卖</b>
                      <span>
                        {{bi}}
                        <small>/{{biz}}</small>
                      </span>
                      <label>{{e.createTime}}</label>
                    </h4>
                    <span class="qbbl-btn" @click="cancelTrade(e.id)" v-if="e.tradeState==1">撤单</span>
                    <span v-else-if="e.tradeState==2">完全成交</span>
                    <span v-else>已撤销</span>
                  </div>
                  <div class="qbbl-info">
                    <p>
                      <span>委托总量</span>
                      {{e.tradeAmount}} {{bi}}
                    </p>
                    <p>
                      <span>委托价格</span>
                      {{e.tradePrice}} {{biz}}
                    </p>
                    <p>
                      <span>已成交量</span>
                      {{e.tradeState ==2?e.tradeAmount:0}} {{bi}}
                    </p>
                    <p>
                      <span>成交均价</span>
                      {{e.tradeState ==2?e.tradePrice:0}} {{biz}}
                    </p>
                  </div>
                </li>
              </van-list>
            </ul>
            <p v-else>暂无记录</p>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
import Scroll from "@/components/scroll";

export default {
  data() {
    return {
      loginToken: "",
      tradeList: [],
      pageNum: 0,
      pageSize: 10,
      total: 0,
      loading: false,
      finished: false,
      bi: "",
      biz: "",
      s: ""
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    if (!!this.$route.query.s) {
      let bi_biz = this.$route.query.s.toUpperCase().split("_");
      this.s = this.$route.query.s.replace("_cnn", "usdt");
      this.bi = bi_biz[0];
      this.biz = bi_biz[1];
      this.getHistoryTradeList();
    }
  },
  components: {
    Scroll
  },
  computed: {
    ...mapState({})
  },
  methods: {
    reset() {
      this.tradeList = [];
      this.pageNum = 0;
      this.total = 0;
      this.loading = true;
      this.finished = false;
    },
    // 委托记录
    getHistoryTradeList() {
      this.pageNum = this.pageNum + 1;
      Services.huobiHistoryList({
        token: this.loginToken,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          // res.list.forEach(element => {
          //   if (element.dealTotalPrice == 0) {
          //     return;
          //   }
          //   element.dealTotalPrice = (element.tradedCnn / element.tradedVc).toFixed(
          //     2
          //   );
          //   // console.log(element.tradedCnn);
          // });
          this.tradeList = this.tradeList.concat(res.list);
          this.total = res.page.total;
          this.loading = false;
          // 数据全部加载完成  停止懒加载
          if (this.pageNum * 10 >= this.total) {
            this.finished = true;
            // console.log("加载完成");
          }
        } else {
          this.loading = false;
          this.finished = true;
          Toast(res.msg);
        }
      });
    },
    goDetail(e) {
      this.$router.push(
        `/quotationDetailHuobi?id=${e.id}&s=${this.$route.query.s}`
      );
    },
    cancelTrade(id) {
      Services.cancelTrade({
        token: this.loginToken,
        tradeId: id
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          Toast("撤单成功");
          this.reset();
          this.getHistoryTradeList();
        } else {
          Toast(res.msg);
        }
      });
    },
    onRefresh(done) {
      this.reset();
      setTimeout(() => {
        done();
        Toast(this.$t("m.refresh"));
        this.getHistoryTradeList();
      }, 2000);
    },
    onInfinite(done) {
      setTimeout(() => {
        done(0);
      });
    },
    onLoad() {
      setTimeout(() => {
        if (this.pageNum != 0 && this.pageNum * 10 >= this.sum) {
          this.finished = true;
          return;
        }
        this.getHistoryTradeList();
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#quotationInfo {
  height: 100%;
  .nav {
    padding: 0 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    z-index: 999;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #40404c;
      }
    }
  }
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow: hidden;
    input {
      -webkit-appearance: none;
      width: 100%;
      height: 1rem;
      border: 1px solid #c5cfd5;
      padding: 0 0.2rem;
      font-size: 0.32rem;
      font-weight: 700;
      box-sizing: border-box;
    }
    ::-webkit-input-placeholder {
      color: #c5cfd5;
    }
    .qbb-list {
      height: 100%;
      padding: 0.3rem;
      color: #1f3f59;
      ul {
        li {
          border-bottom: 1px solid #f7f7fb;
          margin-bottom: 0.2rem;
          .qbbl-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 0.65rem;
            h4 {
              display: flex;
              align-items: center;
              b {
                width: 0.4rem;
                height: 0.4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 0.04rem;
                color: #fff;
              }
              span {
                margin: 0 0.3rem 0 0.2rem;
                font-size: 0.32rem;
                small {
                  font-size: 0.28rem;
                  opacity: 0.8;
                }
              }
              label {
                font-size: 0.2rem;
                color: #c5cfd5;
              }
            }
            .qbbl-btn {
              width: 1rem;
              height: 0.55rem;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.26rem;
              background: transparent;
              color: #1f3f59;
              border: 1px solid #1f3f59;
              border-radius: 1rem;
            }
          }
          .qbbl-info {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            p {
              width: 50%;
              height: 0.55rem;
              display: flex;
              align-items: center;
              font-size: 0.22rem;
              span {
                font-size: 0.24rem;
                opacity: 0.9;
                margin-right: 0.2rem;
              }
            }
          }
        }
      }
      > p {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        color: #c5cfd5;
        font-size: 0.22rem;
      }
    }
  }
}
</style>